<template>
    <div>
        <h2><i class="el-icon-arrow-left  imgicon" @click="back"></i>信息修改</h2>
        <div v-if="num == 1">
            <div class="top">
                <p>
                    <img src="../../assets/img/mine-img/phone.png" class="img1">
                    <input type="number" v-model="value" class="input1" placeholder="请输入手机号码" :class="{ ruler: lock }"
                        :disabled="isok">
                    <span class="ruler1">{{ text }}</span>
                    <img src="../../assets/img/mine-img/error.png" class="img2" @click="value = null">
                </p>
                <p>
                    <img src="../../assets/img/mine-img/yanzheng.png" class="img3">
                    <input type="text" class="input2" placeholder="请输入验证码" :class="{ ruler: lock2 }" v-model="value2">
                    <span class="ruler2">{{ text2 }}</span>
                    <button @click="verify" :disabled="isok">{{ buttontxt }}</button>
                </p>
            </div>
            <button class="btn" @click='submit'>提交</button>
        </div>
        <div>
            <div class="top2" v-if="num == 0">
                <p class="flex jcsb"><button class="btn2 black">取消</button> <button class="btn2 blue">确认</button></p>
                <div class="circle">
                    <ul class="circle-ul">
                        <li v-for="(item) of classList" :key="item.id" class="circle-li">
                            <div v-on:click="changeList(item.id, item.coverImg)"
                                v-bind:class="{ changeBorder: item.id == a }" value="change!">
                                <img :src="item.coverImg" style="width: 150rem;height: 150rem;padding-top: 15rem;" alt />
                                <div :class="{ topicShade: item.id == a }">
                                    <div class="shade"><img src="../../assets/img/mine-img/xuanzhong.png"
                                            style="width: 30rem;height: 30rem;" alt /></div>
                                </div>
                            </div>
                        </li>
                        <van-uploader preview-size="140rem" :after-read="afterRead">
                            <div class="gray">
                                <van-icon name="plus" size="30rem" class="pt20 pb10 pr30 pl30" />
                                <p class="f25 ">上传图片</p>
                            </div>
                        </van-uploader>
                        <!-- <el-upload class="avatar-uploader" action="http://47.94.211.25:8080/vehicle/user/modify"
                            :show-file-list="false" :on-success="handleAvatarSuccess">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { modify } from '../../api/myself'
export default {
    data() {
        return {
            text: '',
            text2: '',
            value: null,
            value2: null,
            lock: false,
            lock2: false,
            num: null,
            a: true,
            fileList: [],
            timer: null,
            timer1: null,
            timer2: null,
            isok: false,
            buttontxt: '获取验证码',
            classList: [
                {
                    id: "001",
                    coverImg: require('@/assets/img/mine-img/youhui.png')
                },
                {
                    id: "002",
                    coverImg: require('@/assets/img/mine-img/youhui.png')
                },
                {
                    id: "003",
                    coverImg: require('@/assets/img/mine-img/youhui.png')
                },
                {
                    id: "004",
                    coverImg: require('@/assets/img/mine-img/youhui.png')
                }
            ]
        }
    },
    created() {
    },
    mounted() {
        this.num = this.$route.query.num
    },
    computed: {
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log(res, file);
        },
        back() {
            this.$router.back()
        },
        changeList(id, src) {
            if (this.a == id) {
                this.a = !this.a;
            } else {
                this.a = id;
            }
            console.log(src);
        },
        //--------未完成
        afterRead(file) {
            // console.log(file.content);
            // modify({
            //     // multipartfile:file.content.data
            //     imageFile:file.content.data
            // }).then(r=>{

            //     console.log(r);
            // })
        },
        submit() {
            clearTimeout(this.timer)
            clearTimeout(this.timer1)
            if (this.value2 == null) {
                this.doudong2()
                this.text2 = '请输入验证码'
            } else {
                this.lock2 = false
                this.text2 = ""
            }
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
            if (this.value == null) {
                this.doudong()
                this.text = '请输入手机号'
                return false;
            } else if (!reg_tel.test(this.value)) {
                this.doudong()
                this.text = '请输入正确的手机号'
                return false;
            }
            else {
                this.lock = false
                this.text = ""
                // 修改信息接口
                modify({ tel: this.value }).then(r => { console.log(r); })
            }

        },
        //验证码
        verify() {
            clearTimeout(this.timer)
            clearInterval(this.timer2)
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
            if (this.value == null) {
                this.doudong()
                this.text = '请输入手机号'
                return false;
            } else if (!reg_tel.test(this.value)) {
                this.doudong()
                this.text = '请输入正确的手机号'
                return false;
            }
            else {
                this.lock = false
                this.text = ""
                this.buttontxt = 60
                this.isok = true
                this.timer2 = setInterval(() => {
                    this.buttontxt -= 1
                    if (this.buttontxt == 0) {
                        this.buttontxt = "获取验证码"
                        this.isok = false,
                            clearInterval(this.timer2)
                    }
                }, 1000)
            }
        },

        doudong() {
            this.lock = true
            this.timer = setTimeout(() => {
                this.lock = false
                this.text = ""
            }, 1000);
        },
        doudong2() {
            this.lock2 = true
            this.timer1 = setTimeout(() => {
                this.lock2 = false
                this.text2 = ""
            }, 1000);
        },

    }
}
</script>
<style scoped>
.imgicon {
    position: absolute;
    left: 30rem;
    top: 80rem;
}

>>>.van-cell {
    border-radius: 30rem;
    margin: 20rem;
    background-color: red;
    width: 300rem;
}

.ruler1,
.ruler2 {
    position: absolute;
    left: 20rem;
    top: 80rem;
    font-size: 18rem;
    color: red;
}

.ruler {
    border: 1rem solid red;
    animation: identifier linear .1s 2;
}

@keyframes identifier {
    25% {
        margin-right: 10rem;
    }

    75% {
        margin-left: 10rem;
    }
}

.top2 .black {
    color: rgb(55, 55, 55);
}

.top2 .blue {
    color: rgb(0, 101, 255);
}

h2 {
    text-align: center;
    font-size: 36rem;
    font-weight: normal;
    width: 100%;
    height: 400rem;
    background-color: rgb(46, 128, 249);
    padding-top: 70rem;
    color: white;
}

.top,
.top2 {
    width: 710rem;
    position: relative;
    top: -300rem;
    left: 18rem;
    box-sizing: border-box;
    font-size: 25rem;
    border-radius: 20rem;
    background-color: #fff;
    padding: 50rem 30rem;
    font-size: 26rem;
}

.top p {
    position: relative;
}

img {
    position: absolute;
    width: 40rem;
    height: 50rem;
}

.img1,
.img3 {
    top: 15rem;
    left: 40rem;
}

.img2 {
    top: 25rem;
    height: 32rem;
    width: 32rem;
    right: 40rem;
}

input {
    height: 78rem;
    padding-left: 100rem;
    background-color: rgb(242, 242, 242);
    outline: none;
    border: none;
    margin: 0 auto;
    margin-bottom: 50rem;
    box-sizing: border-box;
    font-size: 26rem;
    border-radius: 39rem;
}

.input1 {
    width: 650rem;
}

.input2 {
    width: 410rem;
}

button {
    height: 78rem;
    background-color: rgb(42, 127, 247);
    border: none;
    border-radius: 39rem;
    color: #fff;
    font-size: 26rem;
}

.top button {
    width: 188rem;
    margin-left: 20rem;
}

.btn {
    position: relative;
    left: 117rem;
    top: -280rem;
    width: 516rem;
    margin: 0 auto;
}

.top2 p:nth-child(1) {
    position: relative;
    top: -40rem;
    border-bottom: 7rem solid rgb(247, 247, 247);
    font-size: 25rem;
}

.btn2 {
    background-color: #fff;
    color: blue;
}

.gray {
    margin-top: 20rem;
    background-color: #fff;
    border: 1rem solid rgb(225, 225, 225);
    padding: 30rem;
    color: rgb(225, 225, 225);
}

.circle {
    position: relative;
    width: 700rem;
    left: 0;
}

.circle-ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 642rem;
    padding: 0;
    margin: 14rem 0 0 50rem;
}

.circle-li {
    margin-right: 30rem;
    margin-bottom: 20rem;
    width: 150rem;
    height: 150rem;

}

.changeBorder {
    width: 150rem;
    height: 150rem;
    position: relative;
    cursor: pointer;
}

.topicShade {
    position: absolute;
    background-color: green;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
}
</style>

